<template>
  <a-form layout="inline" class="search-form">
    <a-form-item label="教室名称" >
      <a-input v-model:value="listParam.roomName" placeholder="请输入教室名称"></a-input>
    </a-form-item>
    <a-button style="margin-right:15px;" @click="searchBtn">
      <template #icon>
        <search-outlined />
      </template>
      搜索
    </a-button>
    <a-button style="margin-right:15px;" type="primary" danger @click="resetBtn">
      <template #icon>
        <close-outlined />
      </template>
      重置
    </a-button>
    <a-button style="margin-right:15px;" @click="addBtn" type="primary">
      <template #icon>
        <plus-outlined />
      </template>
      新增
    </a-button>
  </a-form>

  <!-- 新增弹框 -->
  <add-classroom ref="addRef" @save="save"></add-classroom>

  <a-table
      style="margin-top: 10px;"
      :dataSource="tableList.list"
      :columns="columns"
      :pagination="rolePage"
      :scroll="{ y: tableHeight }"
      bordered
  >
    <!-- 操作按钮 -->
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <a-button type="primary" @click.stop="editBtn(record)">
          <template #icon>
            <edit-outlined />
          </template>
          <span>编辑</span>
        </a-button>
        <a-button  type="primary" danger style="margin-left: 10px" @click.stop="deleteBtn(record)">
          <template #icon>
            <close-outlined />
          </template>
          <span>删除</span>
        </a-button>
      </template>
    </template>
  </a-table>

</template>

<script setup lang="ts">
import {ref, reactive, onMounted, computed} from 'vue'
import useRoom from "@/composable/classroom/useRoom";
import AddClassroom from "@/views/classroom/component/addClassroom.vue";
import useTable from "@/composable/classroom/useTable";

//表格属性
const { rolePage, listParam, columns, tableHeight, tableList, resetBtn, searchBtn ,getList} = useTable()
const { addBtn, editBtn, deleteBtn, save ,addRef} = useRoom(getList)

</script>

<style scoped lang="scss">
.search-form {
  margin-bottom: 20px;
}
</style>
